<template>
  <el-scrollbar height="650px">
    <div style="background-color: #f1f1f1;padding: 20px 14px 0px 14px;height:670px">
      <div style="display: flex;padding: 0px 20px;height:40px;border-bottom: 1px solid #0270C1;background-color: white">
        <div>
          <svg t="1665660585759" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4634" width="32" height="32"><path d="M559.5 248.7L433.8 473.9 308.1 248.7h-71.7l144.2 249.7H277.1v46.2H403v53.7H277.1v46.2H403V754h61.5V644.4h39.6c5.2-16.3 12.1-31.8 20.4-46.2h-60v-53.7h103.4c7.1-6.4 14.7-12.3 22.5-17.6v-28.6H486.9l144.2-249.7h-71.6z" p-id="4635" fill="#1296db"></path><path d="M150 151.1h529.4l198.5 198.5v191h52V323.1L706.5 99.7l-0.1-0.6H98V931h416.8v-52H150z" p-id="4636" fill="#1296db"></path><path d="M955.3 944l-10.1 10.1c-7.9 7.9-20.7 7.9-28.2 0l-72.2-74c-33.5 23.3-74.4 38.8-118.5 38.8-107.9 0-198.2-89.9-198.2-200.4 0-107.9 89.9-198.2 200.4-198.2 110.6 0 200.4 89.9 200.4 200.4 0 46.2-15.4 89.9-43.6 126l72.2 72.2c5.3 4.9 5.3 17.6-2.2 25.1zM728.9 571.4c-82.4 0-149.3 66.9-149.3 146.7 0 79.7 66.9 146.7 149.3 146.7s149.3-66.9 149.3-146.7c-0.4-79.8-69.6-146.7-149.3-146.7z m0 0" p-id="4637" fill="#1296db"></path></svg>
        </div>
        <div style="text-align: center;line-height: 40px;">预算查询</div>
        <div></div>
      </div>
      <div>
        <div style="display: flex;margin:20px 10px 10px 10px;background-color: white">
          <table class="table">
            <tr>
              <th>
                年度：
              </th>
              <td>
                <div style="display: flex;">
                  <div>
                    <el-radio-group   v-model="ys.budgetYear">
                      <el-radio-button label="" >不限</el-radio-button>
                      <el-radio-button :label="year-1 "></el-radio-button>
                      <el-radio-button :label="year" ></el-radio-button>
                    </el-radio-group>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <th>预算期间：</th>
              <td>
                <div style="display: flex">
                  <div>
                    <el-radio-group v-model="ys.budgetMonth" @change="changeRadio(vale)">
                      <el-radio-button label="" >不限</el-radio-button>
                      <el-radio-button label="01"  >1月</el-radio-button>
                      <el-radio-button label="02" >2月</el-radio-button>
                      <el-radio-button label="03"  >3月</el-radio-button>
                      <el-radio-button label="04" >4月</el-radio-button>
                      <el-radio-button label="05"  >5月</el-radio-button>
                      <el-radio-button label="06" >6月</el-radio-button>
                      <el-radio-button label="07"  >7月</el-radio-button>
                      <el-radio-button label="08" >8月</el-radio-button>
                      <el-radio-button label="09"  >9月</el-radio-button>
                      <el-radio-button label="10" >10月</el-radio-button>
                      <el-radio-button label="11"  >11月</el-radio-button>
                      <el-radio-button label="12"  >12月</el-radio-button>
                    </el-radio-group>
                  </div>


                </div>
              </td>
            </tr>
            <tr>
              <th class="">
                预算科目：
              </th>
              <td>
                <div>

                  <el-select v-model="ys.budgetKm" placeholder="预算科目">
                    <el-option
                        v-for="item in d.yskm"
                        :key="item.budgetKm"
                        :label="item.budgetKm"
                        :value="item.budgetKm"
                        @click="aa"

                    />

                  </el-select>


                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div style="display: flex;margin-right: 10px;flex-direction: row-reverse">
        <el-button type="primary" style="margin-left: 12px;">导出Excel</el-button>
        <el-button type="primary" @click="chaxun">查询</el-button>
      </div>
      <div style="margin:20px 10px 10px 10px;">
        <el-table :data="d.tableData" style="width: 100%;height: 280px" :header-cell-style="{background:'#F5F7FA'}">
          <el-table-column align="center" label="所属部门" width="150" property="deptName"/>
          <el-table-column align="center"  label="预算科目" width="150" property="budgetKm"/>
          <el-table-column align="center"  label="年度" width="150" property="budgetYear"/>
          <el-table-column align="center"  label="月份" width="150" property="budgetMonth"/>
          <el-table-column align="center"  label="预算初始额" width="150" property="budgetCsmoney"/>
          <el-table-column align="center" label="预算剩余额" width="150" property="budgetSymoney"/>
          <el-table-column align="center"  label="预算状态" width="150" property="budgetState"/>
          <el-table-column align="center"  label="创建者" width="150" property="empName"/>

        </el-table>

      </div>
      <div class="Logistics_Paging" >
        <el-pagination
            v-model:currentPage="d.pageNo"
            v-model:page-size="d.pageSize"
            :page-sizes="[5,10, 20, 30, 40]"
            small="small"
            layout="total, sizes, prev, pager, next, jumper"
            :total="d.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup lang="ts">
import {onBeforeMount, reactive, ref} from "vue";
import { Search } from '@element-plus/icons-vue'
import axios from "axios";
import moment from "moment";

const radio = ref("不限")
const radio1 = ref("不限")
const changeRadio=(vale)=>{
  console.log(ys.budgetKm)


}

//人物搜索框
const d = reactive({
  //table当前展示的数据
  list:null,
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:10,
  //表格数据
  tableData:[],
  //科目数据
  yskm:[]
});

const year=moment(new Date()).format("YYYY");

let ys=reactive({
  deptName:'',
  budgetMonth:'',
  budgetYear:'',
  budgetKm:''

})
console.log(ys.budgetYear)
//查询
const ALltableData=ref([])

const getTabelData=()=>{//分页，这里没必要管一样就行
  let data =JSON.parse(JSON.stringify(ALltableData.value));//把数据转为JSON格式
  let shu = data.splice(
      (d.pageNo - 1) * d.pageSize,
      d.pageSize
  )
  d.tableData = shu ;
}

const handleSizeChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageSize = val ;
  d.pageNo = 1;
  getTabelData();
}

const handleCurrentChange = (val: number) => {//分页，这里没必要管一样就行
  console.log("翻页，当前为第几页", val)
  d.pageNo = val;
  getTabelData();
}

const GetData = ()=>{

  axios.post("financeOa/ysgl/allBudget",ys).then((res)=>{
    console.log(res.data.data)
    //分页开始
    var data =res.data.data;//存入查询出来的所有数据
    ALltableData.value = data;//放入表格
    d.total = res.data.data.length;//获得它的长度
    getTabelData();//调用方法
    d.tableData = res.data.data
    //分页结束

  }).catch()
}
const GetKm=()=>{
  axios.post("financeOa/ysgl/allBudgetKm").then((res)=>{
    d.yskm=res.data.data
  })
}
//查询
const chaxun=()=>{
  console.log(ys.budgetKm)
  GetData();
}
onBeforeMount(()=>{
  GetKm();
  GetData();
})
</script>

<style>
.table th{
  border-bottom: 1px solid #D2D2D2;
  border-right: 1px solid #D2D2D2;
  font-weight: 30;
  background-color: #F4F4F4;
  padding: 18px 15px;
  width: 150px;
}
.table{
  border-left: 1px solid #D2D2D2;
  border-top: 1px solid #D2D2D2;
  width: 100%;
  border-spacing:0;
}
.table td{
  border-bottom: 1px solid #D2D2D2;
  border-right: 1px solid #D2D2D2;
  padding-left:20px ;
}
.el-date-editor{
  margin-left: 10px;
}
.el-radio-button{
  margin-right: 10px;
}
</style>